<template>
	<view class="tally-history-record">
		<!-- 分享 -->
		<!-- <button class="share-box" open-type="share">分享<br />记录</button> -->
		<view class="date-range">
			<uni-datetime-picker v-model="range" type="daterange" :clear-icon="false" :border="false"
				@change="maskClick" />
		</view>



		<!-- 历史维系记录 -->
		<view class="work-list">
			<view class="screen-box" @click.stop="openScreenPop">
				<van-icon class="screen-icon" name="filter-o" />
				<text class="screen-text">筛选</text>
			</view>
			<view>
				<view class="no-work-list-tip" v-if="!isHistoryRecordShow">
					<van-icon class="tips-icon" name="warn-o" />
					<p class="tips-text">无维系记录</p>
				</view>

				<view class="wx-work-list-box" v-else>
					<view class="work-item" v-for="(item, index) in historyWxList" :key="index"
						@click.stop="onWxDetail(item)">
						<view class="work-item-header">
							<view class="work-item-header-type" :class="{'xubao': item.type == '续保'}">{{item.type}}
							</view>
							<view class="work-item-header-info">{{item.name}}（{{item.lsn}}）</view>
						</view>
						<view class="work-item-label">
							<view class="work-item-label-item">{{item.subject}}</view>
							<view class="work-item-label-item">M{{item.node == 0 ? '':item.node}}</view>
						</view>
						<view class="work-item-content">
							<view class="work-item-content-item">
								<van-icon class="item-icon" name="contact" />
								<text class="item-text">操作人：{{item.personLiable}}</text>
							</view>
							<view class="work-item-content-item">
								<van-icon class="item-icon" name="orders-o" />
								<text class="item-text">{{item.result}}</text>
							</view>
							<view class="work-item-content-item">
								<van-icon class="item-icon" name="clock-o" />
								<text class="item-text">{{item.finishTime}}</text>
							</view>
						</view>
						<van-icon class="right-arrow-icon" name="arrow" />
					</view>
				</view>
			</view>
		</view>
		<!-- loading加载提示处 -->
		<view class="loading-box" v-show="isLoadMore">
			<uni-load-more :status="loadStatus"></uni-load-more>
		</view>
		<view class="height"></view>

		<!-- 切换项目类别popup -->
		<van-popup :show="projectTypePopShow" position="bottom">
			<van-picker show-toolbar :columns="projectTypeList" @confirm="onProjectTypeConfirm"
				@cancel="projectTypePopShow = false" />
		</van-popup>

		<!-- 筛选popup -->
		<uni-popup ref="popup" background-color="#fff" @change="screenPopChange">
			<view class="screen-content-box">
				<view class="screen-title">全部筛选</view>
				<view class="screen-item">
					<view class="screen-item-name">维系类型</view>
					<view class="screen-type-content">
						<view class="screen-type-item" :class="{'active': screenData.wxType =='定保'}"
							@click="onScreenTypeSelect('dingbao')">定保</view>
						<view class="screen-type-item" :class="{'active': screenData.wxType =='续保'}"
							@click="onScreenTypeSelect('xubao')">续保</view>
					</view>
				</view>

				<view class="screen-item">
					<view class="screen-item-name">车牌号</view>
					<view class="screen-item-content">
						<input class="screen-input" type="text" v-model="screenData.lsn" placeholder="请输入车牌号"
							placeholder-class="placeholderFontClass">
					</view>
				</view>
				<view class="screen-item">
					<view class="screen-item-name">车架号</view>
					<view class="screen-item-content">
						<input class="screen-input" type="text" v-model="screenData.vin" placeholder="请输入车架号"
							placeholder-class="placeholderFontClass">
					</view>
				</view>

				<view class="btn-list">
					<view class="reset-btn" @click.stop="resetScreen">重置</view>
					<view class="done-btn" @click.stop="submitScreen">完成</view>
				</view>

				<view class="screen-height"></view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import apiRqs from "@/api/api-request.js";
	import getDateTime from '@/common/getDateTime.js';
	import removeDuplication from '@/common/removeDuplication.js';
	export default {
		data() {
			return {
				range: [],
				historyRecordList: [],
				isHistoryRecordShow: true,
				nowTime: '',
				beginDate: '',
				endDate: '',
				historyRecordLoading: false,
				projectList: [],
				currentProjectName: "全部类型",
				projectTypePopShow: false,
				projectTypeList: ['全部类型', '定保', '续保'],
				currentResultId: 3,
				shopId: "",
				optionsData: {},
				paged: {
					"pageSize": 5,
					"pageIndex": 1,
					"orderBy": "asc"
				},
				loadStatus: 'loading', //加载样式：more-加载前样式，loading-加载中样式，nomore-没有数据样式
				isLoadMore: false, //是否加载中
				historyWxList: [],
				screenPopShow: false,
				screenData: {
					wxType: "",
					lsn: "",
					vin: ""
				},
			}
		},
		watch: {
			range(newval) {
				console.log('范围选:', this.range);
			},
		},
		onShow() {
			console.log('onShow...');
		},
		onLoad() {
			const wxType = uni.getStorageSync("wxType");
			var timeStr = getDateTime.dateTimeStr('y-m-d h:i:s'); // y:年 m:月 d:日 h:时 i:分 s:秒 中间的分割符号可更改
			this.nowTime = timeStr;
			this.range = [timeStr, timeStr];
			this.beginDate = timeStr;
			this.endDate = timeStr;
			if (wxType == 'xubao') {
				this.screenData.wxType = '续保';
			} else if (wxType == 'dingbao') {
				this.screenData.wxType = '定保';
			}
			this.getHistoryWxList();
			console.log('onLoad...');
		},
		onHide() {
			console.log('record onHide');
		},
		methods: {
			maskClick(e) {
				this.beginDate = e[0] + " 00:00:00";
				this.endDate = e[1] + " 00:00:00";
				console.log('Click:', this.beginDate, this.endDate);
				this.paged.pageIndex = 1;
				this.getHistoryWxList('refresh');
			},
			// 获取历史维系记录列表
			getHistoryWxList(type) {
				const tokenInfo = uni.getStorageSync("tokenInfo");
				getApp().showLoading();
				let rqsData = {
					"lsn": this.screenData.lsn,
					"vin": this.screenData.vin,
					"shopId": tokenInfo.shopId,
					"type": this.screenData.wxType,
					"paged": this.paged
				};
				apiRqs._getHistoryWxList(rqsData).then((res) => {
					uni.hideLoading();
					console.log('历史维系记录', res);
					if (res.code == 200) {
						let newData = JSON.parse(JSON.stringify(res.data.data));


						if (type == 'refresh') {
							this.isHistoryRecordShow = true;
							this.historyWxList = newData;
							if (newData.length > 0 && newData.length < this.paged.pageSize) {
								this.isLoadMore = true;
								this.loadStatus = 'nomore';
							} else if (newData.length > 0 && newData.length == this.paged.pageSize) {
								this.loadStatus = 'more';
								this.isLoadMore = false;
							} else if (newData.length == 0) {
								this.isLoadMore = false;
								this.isHistoryRecordShow = false;
							}
						} else {
							if (newData.length > 0 && newData.length == this.paged.pageSize) {
								this.historyWxList = this.historyWxList.concat(newData);
								this.isLoadMore = false;
								this.loadStatus = 'more';
							} else if (newData.length > 0 && newData.length < this.paged.pageSize) {
								this.historyWxList = this.historyWxList.concat(newData);
								this.isLoadMore = true;
								this.loadStatus = 'nomore';
							} else if (newData.length == 0) {
								if (this.historyWxList.length == 0) {
									this.isHistoryRecordShow = false;
									this.isLoadMore = false;
								} else {
									this.isLoadMore = true;
									this.loadStatus = 'nomore';
								}

							}
						}
					} else {
						getApp().showToast(res.msg);
						this.isLoadMore = false;
					}
				})
			},
			// 切换项目
			handleToggleProject() {
				this.projectTypePopShow = true;
			},
			onProjectTypeConfirm(value) {
				console.log(value);

				this.projectTypePopShow = false;
				this.paged.pageIndex = 1;
				this.getHistoryWxList('refresh');
			},

			handleRecord(item) {
				uni.setStorageSync("doWorkCompletedInfo", item);
				uni.navigateTo({
					url: "/packageA/workbench/completed-detail?isHistory=true"
				})
			},
			// 分享当前用户已完成点检内容给好友
			onShareAppMessage() {
				return this.getShareData();
			},
			getShareData() {
				let tokenInfo = uni.getStorageSync("tokenInfo");
				let {
					beginDate,
					endDate,
					currentMemberId,
					shopId
				} = this;
				let title = "";
				if (beginDate == endDate) {
					let newBeginDate = endDate.split(" ")[0];
					title = `【${newBeginDate}】的点检记录`;
				} else {
					let newBeginDate = beginDate.split(" ")[0];
					let newEndDate = endDate.split(" ")[0];
					title = `【${newBeginDate}至${newEndDate}】的点检记录`;
				}
				let imageUrl = "";
				let path =
					`/packageA/workbench/share-record?currentMemberId=${currentMemberId}&shopId=${shopId}&beginDate=${beginDate}&endDate=${endDate}`;
				return {
					title,
					imageUrl,
					path,
				};
			},
			onPullDownRefresh() {
				console.log('refresh');
				this.paged = {
					"pageSize": 5,
					"pageIndex": 1,
					"orderBy": "asc"
				};
				this.getHistoryWxList('refresh');
				setTimeout(function() {
					uni.stopPullDownRefresh();
				}, 1000);
			},
			openScreenPop() {
				this.$refs.popup.open('bottom');
			},
			screenPopChange(e) {
				console.log('当前模式：' + e.type + ',状态：' + e.show);
			},
			onScreenTypeSelect(type) {
				if (type == 'dingbao') {
					this.screenData.wxType = "定保";
				} else {
					this.screenData.wxType = "续保";
				}
			},
			resetScreen() {
				this.screenData = {
					wxType: "定保",
					lsn: "",
					vin: ""
				};
			},
			submitScreen() {
				this.paged.pageIndex = 1;
				this.$refs.popup.close();
				this.getHistoryWxList('refresh');
			},
			onWxDetail(item) {
				uni.setStorageSync("xubaoHistoryItem", item);
				uni.navigateTo({
					url: "/packageD/xubao/xubao-history-detail"
				})
			},
		},
		onReachBottom() { //上拉触底函数
			console.log('滑到底啦！');
			if (!this.isLoadMore) { //此处判断，上锁，防止重复请求
				this.isLoadMore = true;
				this.paged.pageIndex += 1;
				this.getHistoryWxList();
			}
		},
	}
</script>

<style lang="less">
	page {
		background-color: #f5f5f5;
	}

	.tally-history-record {
		.screen-content-box {
			padding: 0 20px;

			.screen-title {
				font-size: 16px;
				width: 100%;
				text-align: center;
				margin: 20px 0;
			}

			.screen-item {
				.screen-item-name {
					font-size: 16px;
					color: #000;
					font-weight: 500;
					margin: 15px 0px;
				}

				.screen-input {
					background: rgba(0, 0, 0, 0.05);
					border-radius: 4px;
					height: 35px;
					line-height: 35px;
					text-align: center;
					font-size: 14px;
					color: rgba(0, 0, 0, 0.5);
				}

				.placeholderFontClass {
					color: #ddd;
				}

				.screen-type-content {
					display: flex;
					align-items: center;

					.screen-type-item {
						background: rgba(0, 0, 0, 0.05);
						width: 110px;
						height: 35px;
						line-height: 35px;
						text-align: center;
						font-size: 14px;
						color: rgba(0, 0, 0, 0.9);
						border-radius: 4px;
						margin-right: 20px;

						&.active {
							background-color: #fff;
							border: 1px solid #008aff;
							color: #008aff;
						}
					}
				}
			}

			.btn-list {
				display: flex;
				align-items: center;
				margin-top: 30px;

				.reset-btn {
					flex: 1;
					height: 35pt;
					line-height: 35pt;
					background: rgba(0, 0, 0, 0.15);
					font-size: 14px;
					color: #FFFFFF;
					text-align: center;
					border-top-left-radius: 4px;
					border-bottom-left-radius: 4px;
				}

				.done-btn {
					flex: 1;
					height: 35pt;
					line-height: 35pt;
					background: #008aff;
					font-size: 14px;
					color: #FFFFFF;
					text-align: center;
					border-top-right-radius: 4px;
					border-bottom-right-radius: 4px;
				}
			}

			.screen-height {
				height: 25px;
			}
		}

		.share-box {
			position: fixed;
			right: 20px;
			bottom: 50px;
			width: 60px;
			height: 60px;
			border-radius: 50%;
			background-color: #008aff;
			padding-top: 9px;
			box-sizing: border-box;
			color: #fff;
			text-align: center;
			font-size: 14px;
			box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
			line-height: unset;
			border: none;
			z-index: 99;
		}

		.height {
			height: 20px;
		}

		.loading-box {
			font-size: 12px;
		}

		.work-list {
			.screen-box {
				display: flex;
				align-items: center;
				justify-content: flex-end;
				margin: 15px 20px;
				color: #008aff;

				.screen-icon {
					font-size: 20px;
				}

				.screen-text {
					font-size: 13px;
					margin-left: 3px;
				}
			}

			.screen-kpi-section {
				margin: 15px;
				font-size: 14px;
				color: #A0A2AE;
				display: flex;
				align-items: center;

				.record-kpi-type {
					flex: 1;
					min-width: 0;
					display: flex;
					align-items: center;

					.record-kpi-type-text {
						flex: 1;
						min-width: 0;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}

					&.member {
						margin-left: 20px;
					}

					.arrow-icon {
						width: 12px;
						flex: 0 0 12px;
						font-size: 12px;
						margin-left: 3px;
					}
				}


			}

			.no-work-list-tip {
				display: flex;
				align-items: center;
				flex-direction: column;
				font-size: 14px;
				color: #999;
				margin: 40px 0;

				.tips-icon {
					font-size: 36px;
				}

				.tips-text {
					margin-top: 20px;
				}
			}

			.wx-work-list-box {
				.work-item {
					background: #FFFFFF;
					box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.05);
					border-radius: 10px;
					padding: 20px;
					margin: 15px 20px 20px 20px;
					position: relative;

					&:last-child {
						margin-bottom: 10px;
					}

					.right-arrow-icon {
						position: absolute;
						right: 12px;
						top: 50%;
						margin-top: -7px;
						width: 14px;
						flex: 0 0 14px;
						font-size: 14px;
						color: rgba(0, 0, 0, 0.3);
					}

					.work-item-header {
						display: flex;

						.work-item-header-type {
							width: 44px;
							text-align: center;
							height: 20px;
							line-height: 20px;
							flex: 0 0 44px;
							border-radius: 4px;
							font-size: 11px;
							color: #fff;
							background-color: #008aff;

							&.xubao {
								background-color: #F0B83C;
							}
						}

						.work-item-header-info {
							flex: 1;
							min-width: 0;
							font-size: 16px;
							color: rgba(0, 0, 0, 0.9);
							margin-left: 10px;
							margin-top: -1px;
						}
					}

					.work-item-label {
						display: flex;
						flex-wrap: wrap;
						margin-top: 10px;

						.work-item-label-item {
							background: rgba(0, 0, 0, 0.05);
							font-size: 11px;
							color: rgba(0, 0, 0, 0.7);
							padding: 5px 10px;
							border-radius: 4px;
							margin-right: 10px;
						}
					}

					.work-item-content {
						.work-item-content-item {
							margin-top: 12px;
							display: flex;
							align-items: center;

							.item-icon {
								width: 20px;
								flex: 0 0 20px;
								font-size: 20px;
								color: rgba(0, 0, 0, 0.3);
							}

							.item-text {
								flex: 1;
								min-width: 0;
								font-size: 13px;
								color: rgba(0, 0, 0, 0.5);
								margin-left: 10px;
							}
						}
					}
				}
			}
		}
	}
</style>
